<!--
 * @Description: 重置用户密码
 * @Author: DHL
 * @Date: 2022-04-02 16:09:21
 * @LastEditors: DHL
 * @LastEditTime: 2022-04-20 11:09:38
-->

<template>
  <tw-dialog
    v-model="visible"
    title="修改密码"
    :loading="loading"
    width="500px"
    height="260px"
    @close="handleClose"
  >
    <el-form ref="passwordFormRef" :model="passwordForm" :rules="rules">
      <el-form-item prop="newPassword">
        <el-input
          class="area"
          type="text"
          placeholder="请输入新密码"
          v-model="passwordForm.newPassword"
          autocomplete="off"
          auto-complete="new-password"
          size="default"
        ></el-input>
      </el-form-item>
    </el-form>

    <div class="passVerification">
      <div class="pass-verifi">
        <div>弱</div>
        <div class="verifiDiv" :class="dynamicOne"></div>
      </div>
      <div class="pass-verifi">
        <div>中</div>
        <div class="verifiDiv" :class="dynamicTow"></div>
      </div>
      <div class="pass-verifi">
        <div>强</div>
        <div class="verifiDiv" :class="dynamicThs"></div>
      </div>
    </div>

    <div class="passwordTips">
      温馨提示：请输入6~20位密码，并必须包含大小写、数字、特殊字符的其中两种。
    </div>

    <template #footer>
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()"> 提 交 </el-button>
    </template>
  </tw-dialog>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { assign } from 'lodash-es'
  import { reactive, ref, watch } from 'vue'
  import { apiUserUpdateCurrentPwd, apiUserUpdatePassword } from '/@/api/system/user'
  import { log } from '/@/utils/log'

  /**
   * 用户主键
   */
  const userId = ref()

  /**
   * 显示弹框
   */
  const visible = ref(false)

  const loading = ref(false)

  const passwordFormRef = ref()

  /**
   * 密码更新表单
   */
  const passwordForm = reactive({
    userId: '',
    newPassword: ''
  })

  /**
   * 表单校验
   */
  const rules = reactive({
    newPassword: [
      { required: true, message: '请输入修改密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ]
  })

  // 密码强度
  const dynamicOne = ref('verifiDiv')
  const dynamicTow = ref('verifiDiv')
  const dynamicThs = ref('verifiDiv')

  /**
   * 显示弹框
   */
  function handleOpen(uId: string) {
    visible.value = true
    userId.value = uId
  }

  /**
   * 监听密码强度
   */
  watch(
    () => passwordForm.newPassword,
    (newVal: string, oldVal: string) => {
      let modes = 0

      //正则表达式验证符合要求的
      //数字
      if (/\d/.test(newVal)) {
        modes++
      }
      //小写
      if (/[a-z]/.test(newVal)) {
        modes++
      }
      //大写
      if (/[A-Z]/.test(newVal)) {
        modes++
      }
      //特殊字符
      if (/\W/.test(newVal)) {
        modes++
      }

      if (modes == 1) {
        dynamicOne.value = 'verifiDivone'
        dynamicTow.value = 'verifiDiv'
        dynamicThs.value = 'verifiDiv'
      } else if (modes == 2) {
        dynamicOne.value = 'verifiDivone'
        dynamicTow.value = 'verifiDivtow'
        dynamicThs.value = 'verifiDiv'
      } else if (modes > 2) {
        dynamicOne.value = 'verifiDivone'
        dynamicTow.value = 'verifiDivtow'
        dynamicThs.value = 'verifiDivths'
      }
    }
  )

  /**
   * 提交
   */
  function handleSubmit() {
    passwordFormRef.value.validate((valid: boolean) => {
      if (valid) {
        loading.value = true
        apiUserUpdateCurrentPwd(assign(passwordForm, { userId: userId.value }))
          .then((result) => {
            if (result?.success) {
              ElMessage.success(result.message)
              visible.value = false
            } else {
              ElMessage.error(result?.message)
            }
          })
          .finally(() => {
            loading.value = false
          })
      } else {
        log.warn('重置密码', '表单校验失败')
      }
    })
  }

  /**
   * 取消
   */
  function handleClose() {
    visible.value = false
  }

  defineExpose({
    handleOpen
  })
</script>

<style scoped lang="scss">
  .passVerification {
    display: flex;
    align-items: center;
    height: 28px;
    border-radius: 3px;
    border: 1px solid #e8e8e8;
    padding: 5px;
    z-index: 1;
    background: #fff;
    margin-top: 0.3rem;
    .pass-verifi {
      width: 33.33%;
      text-align: center;
      font-size: 0.7rem;
      .verifi-div {
        width: 100%;
        height: 5px;
        background: #ececec;
      }
    }

    .verifiDiv {
      width: 100%;
      height: 5px;
      margin-top: 5px;
      background: #f4f4f5;

      &.verifiDivone {
        background: #26c747;
      }
      &.verifiDivtow {
        background: #ffc335;
      }
      &.verifiDivths {
        background: #ec7e7e;
      }
    }
  }
  .passwordTips {
    font-size: 0.7rem;
    color: #ff7800;
  }
</style>
